<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="StyleSheet" href="../css/account.css" type="text/css" media="screen" />
  <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
  <script src="https://kit.fontawesome.com/58cb2985af.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="accountTitle">Account Information</div>
    <table>
      <tr>
        <td class="accountTableTitle">First name:</td>
        <td class="accountTableContent"><input class="accountInfo" th:value="${userInfo.firstname !=null ? userInfo.firstname : '' }"  name="firstname"></td>
      </tr>
      <tr>
        <td class="accountTableTitle">Last name:</td>
        <td class="accountTableContent"><input class="accountInfo" th:value="${userInfo.lastname !=null ? userInfo.lastname : '' }"  name="lastname"></td>
      </tr>
      <tr>
        <td class="accountTableTitle">Email:</td>
        <td class="accountTableContent"><input class="accountInfo" th:value="${userInfo.email !=null ? userInfo.email : '' }"  name="email"></td>

      </tr>
<!--      <tr>-->
<!--        <td class="accountTableTitle">Phone:</td>-->
<!--        <td class="accountTableContent"><input th:if="${userInfo.phone} != null" type="text" name="phone" th:text="${userInfo.phone}">userInfo.phone</td>-->
<!--      </tr>-->

    </table>

<!--    <div class="accountTitle">Profile Information</div>-->

<!--    <table>-->
<!--      <tr>-->
<!--        <td class="accountTableTitle">Language Preference:</td>-->
<!--        <td class="accountTableContent">-->
<!--          <select name="languagePreference" >-->
<!--            <option value="english" ${sessionScope.userInfo.languagePreference == 'english' ? 'selected' : ''}>English</option>-->
<!--            <option value="chinese" ${sessionScope.userInfo.languagePreference == 'chinese' ? 'selected' : ''}>Chinese</option>-->
<!--          </select>-->

<!--        </td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td class="accountTableTitle">Favourite Category:</td>-->
<!--        <td class="accountTableContent">-->

<!--          <select name="favouriteCategoryId">-->
<!--            <option value="BIRDS" ${sessionScope.userInfo.favouriteCategoryId == 'BIRDS' ? 'selected' : ''}>BIRDS</option>-->
<!--            <option value="FISH" ${sessionScope.userInfo.favouriteCategoryId == 'FISH' ? 'selected' : ''}>FISH</option>-->
<!--            <option value="DOGS" ${sessionScope.userInfo.favouriteCategoryId == 'DOGS' ? 'selected' : ''}>DOGS</option>-->
<!--            <option value="REPTILES" ${sessionScope.userInfo.favouriteCategoryId == 'REPTILES' ? 'selected' : ''}>REPTILES</option>-->
<!--            <option value="CATS" ${sessionScope.userInfo.favouriteCategoryId == 'CATS' ? 'selected' : ''}>CATS</option>-->
<!--          </select>-->
<!--        </td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td class="accountTableTitle">Enable MyList</td>-->
<!--        <td class="accountTableContent"><input type="checkbox" name="listOption" value="1" checked></td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td class="accountTableTitle">Enable MyBanner</td>-->
<!--        <td class="accountTableContent"><input type="checkbox" name="bannerOption" value="1" checked></td>-->
<!--      </tr>-->

<!--    </table>-->

</body>
</html>